<template>
    <div class="card-container">
        <template v-if="isMobile">
            <div class="item-box" :class="className" :data-wow-delay="dataWowDelay" v-for="item in imgList">
                <div class="cover atvImg">
                    <img class="atvImg-layer isMobile" :src="item">
                </div>
            </div>
        </template>

        <template v-else>
            <div class="item-box" :class="className" :data-wow-delay="dataWowDelay" v-for="item in imgList">
                <div class="cover atvImg">
                    <div class="atvImg-layer">
                        <img :src="item" class="atvImg-rendered-layer" alt="">
                    </div>
                </div>
            </div>
        </template>
    </div>
</template>

<script setup>
defineProps({
    imgList: {
        type: Array,
        default: []
    },
    className: {
        type: String,
        default: ''
    },
    dataWowDelay: {
        type: String,
        default: '0.3s'
    }
})
</script>

<style lang="scss">
.card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    max-width: $box-width;
    margin: 0 auto;

    @include respondTo(['phone', 'pad']) {
        width: 100%;
        justify-content: center;
    }

    .item-box {
        display: flex;
        justify-content: center;
        flex-basis: 50%;

        &:nth-child(1),
        &:nth-child(2) {
            margin-bottom: 61px;
        }

        @include respondTo(['phone', 'pad']) {
            margin-bottom: 30px;

            &:nth-child(1),
            &:nth-child(2) {
                margin-bottom: 30px;
            }
        }
    }

    .cover {
        width: 320.17px;
        height: 433.58px;
    }

    .atvImg {
        border-radius: 8px;
        transform-style: preserve-3d;
        -webkit-tap-highlight-color: rgba(#000, 0);
    }

    .atvImg img {
        border-radius: 8px;

        &.isMobile {
            box-shadow: none;
        }
    }

    .atvImg-container {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 8px;
        transition: all 0.2s ease-out;
    }

    .atvImg-container.over .atvImg-shadow {
        box-shadow: 0 45px 100px rgba(14, 21, 47, 0.4), 0 16px 40px rgba(14, 21, 47, 0.4);
    }

    .atvImg-layers {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 8px;
        overflow: hidden;
        transform-style: preserve-3d;
    }

    .atvImg-rendered-layer {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0%;
        left: 0%;
        background-repeat: no-repeat;
        background-position: center;
        background-color: transparent;
        background-size: cover;
        transition: all 0.1s ease-out;
        overflow: hidden;
        border-radius: 8px;
    }

    .atvImg-shadow {
        position: absolute;
        top: 5%;
        left: 5%;
        width: 90%;
        height: 90%;
        transition: all 0.2s ease-out;
        box-shadow: 0 8px 30px rgba(14, 21, 47, 0.6);
    }

    .atvImg-shine {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 8px;
        background: linear-gradient(135deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 60%);
    }
}
</style>
